<template>
  <div class="order_table">
    <el-table class="outer_order_table" :data="orderState.orderList" :border="parentBorder" height="100%"
      style="width: 100%" :row-key="row => row.id" :expand-row-keys="expandedRowKeys"
      v-loading="orderState.orderLoading" :row-class-name="getrowclassname">
      <el-table-column :label="languageJson.order.orderNum" width="100">
        <template #default="scope">
          <div class="text1 DINAlternate">{{ scope.row.id }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.order.time" prop="name" width="120">
        <template #default="scope">
          <div class="text1 DINAlternate">{{ scope.row.created_at }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.order.play" prop="name" width="80">
        <template #default="scope">
          <div class="text2 AlibabaPuHuiTi_2_85_">
            {{ scope.row.sport_type == 'soccer' ? languageJson.home.soccer : languageJson.home.basketball }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.home.match" prop="name">
        <template #default="scope">
          <div class="flex_column">
            <div class="text3 AlibabaPuHuiTi_2_85_">{{ scope.row.minfo.home_name }} vs {{ scope.row.minfo.away_name }}</div>
            <div class="text4 AlibabaPuHuiTi_2_55_">{{ scope.row.minfo.match_time }} {{ scope.row.minfo.league_name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.order.orderScore" prop="name" align="center" width="130">
        <template #default="scope">
          <div class="flex_column">
            <!-- <div class="text1">FT</div> -->
            <div class="text1 DINAlternate">{{ scope.row.score.score }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.order.handicap" prop="name" width="160">
        <template #default="scope">
          <div class="text2 AlibabaPuHuiTi_2_55_">{{ orderStore.gethandicapname(scope.row.sport_type, scope.row.pk_odds_key) }}</div>
          <!-- <div class="text2">{{ scope.row.pk_odds_key_ch }}</div> -->
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.home.status" prop="name" width="100">
        <template #default="scope">
          <div class="flex">
            <img v-if="scope.row.run_status == 1" src="@/assets/home/clock.png" style="width: 16px; height: 16px"
              alt="" />
            <img v-if="scope.row.run_status == 2" src="@/assets/home/done.png" style="width: 16px; height: 16px"
              alt="" />
            <img v-if="scope.row.run_status == 3" src="@/assets/home/cancelled.png" style="width: 16px; height: 16px"
              alt="" />
            <div style="margin-left: 4px" :style="runstatusStyle(scope.row.run_status)">
              {{ runstatusMap[scope.row.run_status] }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.home.odd" prop="name" width="70">
        <template #default="scope">
          <div class="text1">{{ comprehensiveOdd(scope.row) }}</div>
        </template>
      </el-table-column>

      <el-table-column :label="languageJson.home.orderAmount" prop="name" width="130">
        <template #default="scope">
          <!-- <div class="text1">￥{{ scope.row.total_stake }}/￥{{ scope.row.total_success_stake }}</div> -->
          <div class="flex_column">
            <div class="text1">￥{{ scope.row.total_stake }}</div>
            <div class="text5" style="color: #1cc535">(￥{{ scope.row.total_success_stake }})</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.order.profit" prop="name" width="150">
        <template #default="scope">
          <div class="text1">￥{{ scope.row.total_win_back }}</div>
        </template>
      </el-table-column>
      <el-table-column width="40">
        <template v-slot="scope">
          <el-button size="small" type="text" @click="handleExpand(scope.row)">
            <template v-if="!isRowExpanded(scope.row)">
              <img src="@/assets/order/square.png" style="width: 16px; height: 16px" alt="" />
            </template>
            <template v-else>
              <img src="@/assets/order/up-square.png" style="width: 16px; height: 16px" alt="" />
            </template>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column type="expand" width="20">
        <template #default="props">
          <!-- >{{props.row.id}} -->
          <div class="expand_order_table">
            <el-table :data="props.row.order_list" style="width: 100%">
              <el-table-column prop="date" :label="languageJson.home.accountNumber">
                <template #default="scope2">
                  <div class="text1">{{ scope2.row.user_name }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="name" :label="languageJson.home.bctype">
                <template #default="scope2">
                  <div class="text2">{{ languageJson.bctypes[scope2.row.bc_type] }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" :label="languageJson.home.status">
                <template #default="scope2">
                  <div class="flex">
                    <img v-if="scope2.row.check_status == 0" src="@/assets/order/shibai.png"
                      style="width: 16px; height: 16px" alt="" />
                    <img v-if="scope2.row.check_status == 1" src="@/assets/order/yijiesuan.png"
                      style="width: 16px; height: 16px" alt="" />
                    <div class="text2" style="margin-left: 4px"
                      :style="scope2.row.check_status == 0 ? 'color: #ff5f58;' : 'color: #3711d8;'">
                      {{
                        scope2.row.check_status == 0
                          ? languageJson.order.unresolved
                          : languageJson.order.alreadysettled
                      }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" :label="languageJson.home.odd">
                <template #default="scope2">
                  <div class="text1">{{ scope2.row.place_odds_info }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" :label="languageJson.home.orderamount">
                <template #default="scope2">
                  <div class="text1">{{ scope2.row.total_amount }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" :label="languageJson.order.profit">
                <template #default="scope2">
                  <div class="text1" :style="scope2.row.total_win_back >= 0 ? 'color: #1cc535;' : 'color: #ff5f58;'">
                    {{ scope2.row.total_win_back.toFixed(2) }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const { orderStore, orderState } = inject('OrderStore')
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const runstatusMap = ref({
  0: languageJson.value.order.Notcarriedout,
  1: languageJson.value.order.reservation,
  2: languageJson.value.home.alreadyComplete,
  3: languageJson.value.home.cancel,
})

const expandedRowKeys = ref([])

const runstatusStyle = value => {
  let a = ''
  switch (value) {
    case 1:
      a = 'color: #feac2e;'
      break
    case 2:
      a = 'color: #1cc535;'
      break
    case 3:
      a = 'color: #ff5f58;'
      break

    default:
      break
  }
  return a
}

const comprehensiveOdd = row => {
  let a = '-'
  let num1 = 0
  let num2 = 0
  let num3 = 0
  row.order_list.forEach(item => {
    num1 += item.total_amount
    num2 += item.total_amount * item.place_odds_info
  })

  if (num1 != 0) {
    num3 = num2 / num1
    a = num3.toFixed(3)
  }
  return a
}

const getrowclassname = data => {
  let a = ''
  if (expandedRowKeys.value.includes(data.row.id)) {
    a = 'active_row'
  }
  return a
}
const handleExpand = row => {
  const rowIndex = expandedRowKeys.value.indexOf(row.id)
  if (rowIndex === -1) {
    expandedRowKeys.value.push(row.id)
  } else {
    expandedRowKeys.value.splice(rowIndex, 1)
  }
}

const isRowExpanded = row => expandedRowKeys.value.includes(row.id)
</script>

<style lang="scss" scoped>
.order_table {
  width: 100%;
  height: calc(100% - 48px);
  padding: 0 12px 12px 12px;
}

.text1 {
  //   font-family: DINAlternate;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.text2 {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 14px;
  color: #000;
}

.text3 {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.text4 {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 12px;
  color: #999;
}
.text5 {
  font-size: 14px;
  font-weight: bold;
  color: #1cc535;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.flex {
  display: flex;
  align-items: center;
}
</style>

<style>
.outer_order_table thead tr th.el-table__cell {
  height: 32px;
  line-height: 32px;
  padding: 6px 0;
  background-color: #f3f5fd;
  font-family: AlibabaPuHuiTi_2_85_;
}

.outer_order_table tbody tr td.el-table__cell {
  border-color: rgba(55, 17, 216, 0.08);
}

.outer_order_table .active_row .el-table__cell {
  border: none;
  background-color: #f8f9fe;
}

.outer_order_table .el-table__expanded-cell {
  background-color: #f8f9fe;
  padding: 8px;
}

.outer_order_table thead tr th.el-table__cell .cell {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

/* .el-table .el-table__expand-icon {
  display: none;
} */

.outer_order_table .el-table__expand-icon {
  display: none !important;
}

/* 使展开列不占据空间 */
.outer_order_table .el-table__expand-column {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.outer_order_table .el-table__expand-column .cell {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.expand_order_table thead tr th.el-table__cell {
  background-color: #eceffa;
}

.expand_order_table tbody tr td.el-table__cell {
  border: none;
}

.outer_order_table .el-table__inner-wrapper::before,
.expand_order_table .el-table__inner-wrapper::before {
  height: 0;
}
</style>